<template>
  <div class="addaddress">
    <header>
      <div @click="goBack">
        <i><img src="@/assets/images/icons/fanhui.png"></i>
      </div>
      <h3>新增地址</h3>
      <div></div>
    </header>
    <section>
      <el-form label-position="left" label-width="80px" :model="formLabelAlign">
        <el-form-item label="收货人">
          <el-input v-model="formLabelAlign.name" placeholder="请输入收件人姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formLabelAlign.tel" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="所在地区">
          <el-input v-model="formLabelAlign.area" placeholder="请输入所在地区" @click.native="choose"></el-input>
        </el-form-item>
        <div class="divwrap">
          <div class="mask" @click="choose" v-show="show"></div>
          <v-distpicker
              v-show="show"
              type="mobile"
              @province="onChangeProvince"
              @city="onChangeCity"
              @area="onChangeArea"
              :province="newInfo.province"
              :city="newInfo.city"
              :district="newInfo.district"
          >
          </v-distpicker>
        </div>
        <el-form-item label="详细地址">
          <el-input v-model="formLabelAlign.address" placeholder="请输入详细地址"></el-input>
        </el-form-item>
      </el-form>
      <label>设置默认收货地址</label>
      <el-switch v-model="formLabelAlign.delivery"></el-switch>
    </section>
    <footer @click="addAddress()">保存地址</footer>
  </div>
</template>

<script>
import {api1} from "@/common/api/request";
import {Toast} from "mint-ui";
import {mapState} from 'vuex'
import VDistpicker from 'v-distpicker';
export default {
  name: "addaddress",
  data(){
    return{
      queryId: 0,
      formLabelAlign: {
        name: '',
        tel: '',
        area: '',
        address: '',
        delivery: false,
      },
      show: false,     // 是否显示遮罩层
      newInfo: {
        province: '', // 省
        city: '',     // 市
        district: '',     // 区
      }
    }
  },
  computed:{
    ...mapState({
      list: state => state.address.list
    })
  },
  components: {
    'v-distpicker': VDistpicker
  },
  created() {
    //接收传过来的值
    this.queryId = this.$route.query.id
    if(this.$route.query.id>=0){
      this.formLabelAlign.name = this.list[this.queryId].name
      this.formLabelAlign.tel = this.list[this.queryId].tel
      this.formLabelAlign.address = this.list[this.queryId].address
      this.newInfo.province = this.list[this.queryId].province
      this.newInfo.city = this.list[this.queryId].city
      this.newInfo.district = this.list[this.queryId].district
      this.formLabelAlign.area = this.newInfo.province + '-' + this.newInfo.city + '-' + this.newInfo.district
      if(this.list[this.queryId].isDefault === 1){
        this.formLabelAlign.delivery = true
      }else{
        this.formLabelAlign.delivery = false
      }
    }
  },
  methods:{
    goBack(){ //返回
      this.$router.back()
    },
    //保存新增地址
    addAddress(){
      //发送请求
      api1({
        url: '/api/addAddress',
        method:'POST',
        data:{
          form: this.formLabelAlign,
          info: this.newInfo,
          id: this.list[this.queryId].id
        },
        headers:{
          token: true
        }
      }).then(res => {
        if(res.success){
          Toast(res.msg)
          this.$router.push('/address')
        }
      })
    },
    choose () {
      this.show = !this.show
    },
    onChangeProvince (data) {
      this.newInfo.province = data.value
    },
    onChangeCity (data) {
      this.newInfo.city = data.value
    },
    onChangeArea (data) {
      this.newInfo.district = data.value
      this.formLabelAlign.area = this.newInfo.province + '-' + this.newInfo.city + '-' + this.newInfo.district
      this.show = false
    },
  }
}
</script>

<style scoped lang="scss">
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F7F7F7;
  height: 48px;
  img{
    width: 24px;
    height: 24px;
  }
}
section{
  margin: 10px;
}
.divwrap > .mask {
  background: #000;
  opacity: 0.3;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.divwrap > .distpicker-address-wrapper {
  color: #999;
  background: #fff;
  border-top: 1px solid #ccc;
  z-index: 1;
  height: 420px;
  overflow-y: auto;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}
footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 20px;
}
</style>